<link href="static/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
 <div id="legend" class="">
   <legend class="">资料录入</legend>
</div>

<div class="row" style="background:#fff;">

    <div class="col-sm-8">

    <div>
<!--       <form class="form-horizontal">
  <fieldset> -->


           <div class="control-group col-sm-3">
              <div class="controls">
              <label class="control-label">类别</label>
                <select class="form-control" id='gx_fl'>
                  <option value="10">人物</option>
                  <option value="20">建筑</option>
                  <option value="30">艺术</option>
                </select>
              </div>
            </div>

           <div class="control-group col-sm-6">
              <div class="controls">
                <label class="control-label">国家</label>
                <input type="text" placeholder="国家" id ='gx_gj' maxlength="11" class="form-control">
                <p class="help-block"></p>
              </div>
            </div>


            <div class="control-group col-sm-4">
              <div class="controls">
                <label class="control-label">名称</label>
                <input type="text" placeholder="人名，建筑名，艺术品名" id='gx_name' maxlength="20" class="form-control input-xlarge search-query">
              </div>
            </div>

            <div class="control-group col-sm-4">
              <label class="control-label" for="input01">日期起</label>
              <div class="controls">
                <input type="number" placeholder="填数字，公元前‘-’号表示" id = 'gx_rqq'  class="form-control">
              </div>
            </div>


            <div class="control-group col-sm-4">
              <label class="control-label" for="input01">日起止</label>
              <div class="controls">
                <input type="number" placeholder="填数字，公元前‘-’号表示" id = 'gx_rqz'  class="form-control">
              </div>
            </div>
        
           <div class="control-group col-sm-12">
              <label class="control-label">简介</label>
              <div class="controls">
                <div class="textarea">
                      <textarea type="" id = 'gx_intro' class="form-control" style="height: 50px;resize: none;"> </textarea>
                </div>
              </div>
            </div>


            <div class="control-group col-sm-12">
              <label class="control-label">详细信息</label><button class="btn btn-info" id ='btn_getxx'>获取信息</button>
              <button class="btn btn-success" id ='btn_preview' >预览</button>
              <div class="controls">
                <div class="textarea">
                      <textarea type="" class="form-control" id = 'gx_xxxx' style="height: 250px;resize: none;"> </textarea>
                </div>
              </div>
            </div>

            <div class="control-group col-sm-3">
              <label class="control-label"></label>

              <!-- Button -->
              <div class="controls">
                <button class="btn btn-success form-control" id ='btn_submit'>提交</button>
              </div>
            </div>

    </div>
  </div>

   <div class="col-sm-4">

               <label class="control-label">上传图片</label>
                <div class="form-group">
                    <input  type="file" id = 'gx_img' multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
                </div>


               <div class="jumbotron">
                    <h3>资料提交说明</h3>

                    <h5>
                     <p>1.由于本系统信息检索主要建立在百度百科上，所以想要快捷检索，名称最好是百度百科能检索到信息。</p>
                     <p>2.日期均为数字，如果是公元前则用‘-’负号表示。日期越精准越好。</p>
                     <p>3.摘要可以手工百科，复制内容开头部分即可。</p>
                     <p>4.如果数据来自百科，填写名称后可以点击‘获取信息’来快速获取详细信息（勿随便修改）。获取后可以点击‘预览’查看。</p>
                     <p>5.若数据来自其他平台，则需手工粘贴复制对应信息。</p>
                    </h5> 
                </div>


    </div>

         <div class="modal right fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                
                <h4 class="modal-title" id="myModalLabel"></h4>
              </div>
              <div class="modal-body" ">
                <div id="modal_bklist" style="font-size:larger;font-family: \96B6\4E66;"></div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
      </div>


</div>

<script src="static/js/fileinput.js" type="text/javascript"></script>
<script type="text/javascript">

//资料提交
          $('#btn_submit').click(function(){

              gj   = $('#gx_gj').val()
              fl   = $('#gx_fl').val()
              name = $('#gx_name').val()
              rqq  = $('#gx_rqq').val()
              rqz  = $('#gx_rqz').val()
              intro= $('#gx_intro').val()
              xxxx = $('#gx_xxxx').val()

              if(rqq=='' || rqz=='' || name=='' || intro==''|| xxxx==''){
                alert('信息不能为空！')
                return 
              }
              let img =''
              let file_list = $('#gx_img')[0].files

              if(file_list.length == 0 ){
                  alert('图片不能为空！')
                  return 
              }
              file = file_list[0]
              let reader = new FileReader()
              reader.readAsDataURL(file)

              reader.onload =function(){
                img = reader.result
                let list = {
                  'bz'  : 'insert',
                  'gj'  : $('#gx_gj').val(),
                  'fl'  : $('#gx_fl').val(),
                  'name': $('#gx_name').val(),
                  'rqq' : $('#gx_rqq').val(),
                  'rqz' : $('#gx_rqz').val(),
                  'intro': $('#gx_intro').val(),
                  'xxxx': $('#gx_xxxx').val(),
                  'img' : img
                 }

                 $.ajax({
                  //请求方式
                      type : "POST",
                      //数据类型
                      dataType: 'json',
                      //请求地址
                      url : "/post_zlxx",
                      //数据，json字符串
                      data : list,
                      //请求成功
                      success : function(rs) {
                          alert(rs.mes)
                          $('#gx_name').val('');
/*                          $('#gx_gj').val('');
                          $('#gx_rqq').val('');
                          $('#gx_rqz').val('');*/
                          $('#gx_intro').val('');
                          $('#gx_xxxx').val('');
                      },
                      //请求失败，包含具体的错误信息
                      error : function(e){
                          alert(e)
                      }
                  });
              }
          });
  

//获取信息
  $('#btn_getxx').click(function(){
              let name = $('#gx_name').val()

              if(name==''){
                alert('名称不能为空！')
                return 
              }
           
                 $.ajax({
                  //请求方式
                      type : "POST",
                      //数据类型
                      dataType: 'json',
                      //请求地址
                      url : "/get_bklist",
                      //数据，json字符串
                      data : {'name':name},
                      beforeSend: function(request) {
                        let loading_html = '<div class ="row"  style="margin-left: 50%"><img src="static/img/loading.gif"></div> '  
                        $('#myModalLabel').text(name)
                        $('#modal_bklist').html(loading_html)
                        $('#myModal').modal('show')
                      }, 
                      //请求成功
                      success : function(rs) {
                          $('#gx_xxxx').val(rs.bkxx);
                          console.log(rs)
                          if(rs.bklist != ''){
                            let html = '<ul class="ul_url">'

                            for(i=0;i<rs.bklist.length;i++){
                              if (rs.bklist[i].url==''){
                                html+='<li><span>'+rs.bklist[i].text+'</span></li>'
                                continue
                              }
                              html += '<li><a href="#"  value ="'+rs.bklist[i].url+'" > '+rs.bklist[i].text+'</a></li>'
                            }
                            html = html+'</ul>'

                            $('#myModalLabel').text(name)
                            $('#modal_bklist').html(html)
                            return
                          }
                          //列表为空时，自动关闭modal
                          $('#myModal').modal('hide')

                      },
                      //请求失败，包含具体的错误信息
                      error : function(e){
                          alert(e)
                      }
                  });
              
          });


  //资料选择
  $(document).on("click", '.ul_url li a', function () {
        
        let  url_select= $(this).attr('value')
        
         $.ajax({
          //请求方式
              type : "POST",
              //数据类型
              dataType: 'json',
              //请求地址
              url : "/get_xxxxByUrl",
              //数据，json字符串
              data : {'url_select':url_select},
              //请求成功
              success : function(rs) {
                  $('#gx_xxxx').val(rs.zlxx);
                  $('#myModal').modal('hide')
              },
              //请求失败，包含具体的错误信息
              error : function(e){
                  alert(e)
              }
          });

    })

  //预览 
  $('#btn_preview').click(function(){

      $('#myModalLabel').text('预览')
      html_preview = $('#gx_xxxx').val()
      $('#modal_bklist').html(html_preview)
      $('#myModal').modal('show')
  })
</script>